<template>
	<view class="noticeLayout">
		<view class="title">
			<view class="headerTitle">
				<view class="tag" v-if="detail.select">
					<!-- <uni-tag inverted text="置顶" type="error" size="small"/> -->
					置顶
				</view>
				<view class="font">
					{{detail.title}}
				</view>
			</view>

			<view class="info">
				<view class="item">
					{{detail.author}}
				</view>
				<view class="item">
					<uni-dateformat :date="detail.publish_date" format="yyyy-MM-dd hh:mm:ss"></uni-dateformat>
				</view>
			</view>

			<view class="content">
				<!-- 富文本 -->
				<!-- <rich-text :nodes="detail.content"></rich-text> -->
				<!-- <sv-wangeditor :html="detail.content"></sv-wangeditor> -->
				<mp-html :content="detail.content"/>
			</view>

			<view class="count">
				阅读：{{detail.view_count}}
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref } from "vue";
	import {apiNoticeDetail} from "@/api/apis.js"
	import {onLoad} from "@dcloudio/uni-app"
	
	const detail = ref({});
	let pageName;
	let noticeId;
	
	onLoad((e)=>{
		let {id=null,name=null} = e;
		if(id) noticeId = id;
		if(name) pageName = name;
		
		uni.setNavigationBarTitle({
			title:name
		})
		
		getNoticeDetil();
	})
	
	const getNoticeDetil= ()=>{
		apiNoticeDetail({
			id:noticeId
		}).then(res=>{
			detail.value = res.data;
			console.log(res);
		})
	}

</script>

<style lang="scss" scoped>
	.noticeLayout {
		padding: 30rpx 30rpx 0 30rpx;

		.title {
			display: grid;
			grid-template-columns: repeat(1, 1fr);
			gap: 1.5em;

			.headerTitle {
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: left;
				.tag {
					width: 80rpx;
					height: 50rpx;
					line-height: 50rpx;
					color: $uni-color-error;
					text-align: center;
					font-size: 28rpx;
					font-weight: 400;
					border-radius: 4rpx;
					background: transparent;
					border: 1rpx solid $uni-color-error;
					box-sizing: border-box;
					margin-right: 10rpx;
				}
				.font {
					font-size: 28rpx;
					font-weight: 400;
					line-height: 40rpx;
				}
			}

			.info {
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: left;

				.item {
					color: $brand-theme-color;
					font-size: 20rpx;
				}

				.item:first-child {
					margin-right: 10rpx;
				}
			}

			.content {
				font-size: 24rpx;
			}

			.count {
				color: $brand-theme-color;
				font-size: 20rpx;
			}
		}
	}
</style>